<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores'
import { userUpdateInfoService } from '@/api/user'
import { ElMessage } from 'element-plus'
const userStore = useUserStore()
const formRef = ref(null)
// 表单加载效果

const form = ref({
  id: userStore.user.id,
  username: userStore.user.username,
  nickname: userStore.user.nickname || '',
  email: userStore.user.email || ''
})
const rules = {
  nickname: [
    { required: true, message: '请输入昵称', trigger: 'blur' },
    { pattern: /^\S{2,10}$/, message: '请输入2-10个非空字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
  ]
}

// 提交
const onsubmit = async () => {
  formRef.value.validate()
  await userUpdateInfoService(form.value)
  // 获取修改后的数据
  userStore.getUser()
  ElMessage.success('修改成功')
}
</script>

<template>
  <page-container title="个人详情页">
    <template #default>
      <el-row>
        <el-col :span="12">
          <el-form
            :model="form"
            :rules="rules"
            ref="formRef"
            label-width="100px"
          >
            <el-form-item label="登录名称" prop="username">
              <el-input disabled v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
              <el-input v-model="form.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onsubmit"> 提交修改 </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </template>
  </page-container>
</template>
